<template>
       <el-main class="main-content">
        <!-- 查询表格区域 -->
        <div class="query-form-container">
          <h3 class="form-title">查询表格</h3>
          <el-form :model="formData" inline>
            <el-form-item label="集合编号">
              <el-input
                v-model="formData.collectionId"
                placeholder="请输入集合编号"
              />
            </el-form-item>

            <el-form-item label="集合名称">
              <el-input
                v-model="formData.collectionName"
                placeholder="请输入集合名称"
              />
            </el-form-item>

            <el-form-item label="内容载体">
              <el-select v-model="formData.contentCarrier" placeholder="请输入内容" style="width: 200px;">
                <el-option label="选项1" value="option1"></el-option>
                <el-option label="选项2" value="option2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

      <div class="query-form-container">
          
          <el-form :model="formData" inline>
            <el-form-item label="集合编号">
              <el-input
                v-model="formData.collectionId"
                placeholder="请输入集合编号"
              />
            </el-form-item>

            <el-form-item label="集合名称">
            <div class="block">
      <span class="demonstration">date</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a date"
        :default-value="new Date(2010, 9, 1)"
      />
    </div>
            </el-form-item>

            <el-form-item label="内容载体">
              <el-select v-model="formData.contentCarrier" placeholder="请输入内容" style="width: 200px;">
                <el-option label="选项1" value="option1"></el-option>
                <el-option label="选项2" value="option2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

      </el-main>
   
    <!-- 搜索区域 -->
    <el-input v-model="userSearch" style="width: 240px" placeholder="Please input" clearable />
    <!-- 新增按钮 -->
    <el-button size="small" @click="add()">新增</el-button>
    <!-- 渲染区域 -->
    <el-table empty-text="暂无数据" :data="userData" style="width: 100%">
        <el-table-column label="用户名称" width="180">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.userName }}</span>
            </template>
        </el-table-column>
   
        <el-table-column label="用户数量" width="180">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.role }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否上架" width="180">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.status == 0 ? '上架' : '下架' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="用户价格" width="180">
            <template #default="scope">
                <span style="margin-left: 10px">{{ scope.row.section }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="edit(scope.row)">
                    修改
                </el-button>
                <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                    title="您真的要删除?" @confirm="confirmEvent(scope.row.id)" @cancel="cancelEvent">
                    <template #reference>
                        <el-button size="small" type="danger" @click="(scope.row)">
                            Delete
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 新增编辑弹框区域 -->
    <el-dialog v-model="dialogFormVisible" :title="tit" width="500">
        <el-form :model="ExitandAddData">
            <el-form-item label="用户" :label-width="formLabelWidth">
                <el-input v-model="ExitandAddData.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="图片" :label-width="formLabelWidth">
                <el-input v-model="ExitandAddData.photo" autocomplete="off" />
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="ExitandAddData.role" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上架状态" :label-width="formLabelWidth">
                <el-input v-model="ExitandAddData.status" autocomplete="off" />
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="ExitandAddData.section" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">
                    删除成功
                </el-button>
            </div>
        </template>
    </el-dialog>



<el-pagination background layout="prev, pager, next" :total="1000" />

</template>

<script setup>
import { reactive, ref } from 'vue'

const formData = reactive({
  collectionId: '',
  collectionName: '',
  contentCarrier: '',
})
const value1 = ref('')
// 引入 ref
import {  watch } from 'vue'
// 引入 接口函数
import { getUserListApi, userSearchApi, delUserApi, addUserApi, editItemApi } from '@/api/api'
// -----------------------------------渲染--------------------------------
// 自定义渲染数据
let userData = ref([])
// 自定义渲染函数
const user = () => {
    // 发渲染请求
    getUserListApi().then(res => {
        console.log('用户列表', res)
        userData.value = res.data.data;
    })
}
user()
// -----------------------------------删除--------------------------------
const confirmEvent = (id) => {
    // console.log('用户删除',id)
    // 执行删除
    delUserApi(id).then(res => {
        console.log('删除数据', res)
        if (res.data.code == 1) {
            // 提示 删除成功
            // 自动刷新
            user()
        }
    })
}
// -----------------------------------搜索--------------------------------
// 自定义搜索数据 
let userSearch = ref('')
watch(userSearch, (val) => {
    console.log('搜索数据', val)
    userSearchApi(val).then(res => {
        console.log('搜索数据', res)
        userData.value = res.data.list
    })
})
// -----------------------------------新增&编辑--------------------------------
// 自定义新增和编辑的数据来源
let ExitandAddData = ref([])
// 自定义判断新增 编辑的数据
let pd = true;
// 自定义新增编辑的标题
let tit = ref('新增数据')
// 控制 显示隐藏的
const dialogFormVisible = ref(false)
// 点击编辑
const edit = (row) => {
    // 显示dialog框
    dialogFormVisible.value = true;
    // 数据回显
    ExitandAddData.value = row;
    // 自定义判断的值
    pd = false;
    tit.value = '编辑'
}
// 点击新增
const add = () => {
    // 显示dialog框
    dialogFormVisible.value = true;
    // 数据清空
    ExitandAddData.value = [];
    // 自定义判断的值
    pd = true;
    tit.value = '新增'
}
// 点击 dialog 中的确定的时候 -- 判断 是新增还是 编辑功能
const submit = () => {
    if (pd) {
        // alert('新增')
        addUserApi(ExitandAddData.value).then(res => {
            console.log('新增请求', res)
            // 判断 + 提示
            user();
            dialogFormVisible.value = false;
        })
    } else {
        // alert('编辑')
        editItemApi(ExitandAddData.value).then(res => {
            console.log('编辑请求', res)
            // 判断 + 提示
            user();
            dialogFormVisible.value = false;
        })
    }
}
</script>

<style lang="scss" scoped>

</style>